<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-20 14:55:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-08-06 17:52:53
 * @FilePath: \ruoyi-ui\src\views\source\dashboard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="homepage">
    <i class="el-icon-full-screen fullscreen" @click="fullScreen()"></i>

    <div class="header">
      <img class="title" src="./title.png" />
      <!-- <div class="title-font">宏凯铝业5G智慧工厂生产看板</div> -->
      <div class="title-font">加多利铝业5G智慧工厂生产看板</div>
      <div class="now">{{ nowDate }}</div>
    </div>
    <div class="container">
      <div class="row flex-between box">
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">模具合格率</div>
          </div>
          <div class="row model-pannel" style="margin-top: 50px">
            <div class="model-title">模具总数</div>
            <div class="cTime">{{ ctime }}</div>
            <div
              v-for="(subitem, index) in info.totalMoulds"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">合格总数</div>
            <div
              v-for="(subitem, index) in info.qualifiedMoulds"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">不合格总数</div>
            <div
              v-for="(subitem, index) in info.unqualifiedMoulds"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">合格率</div>
            <div
              v-for="(subitem, index) in info.qualifiedRate"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
              <span class="unit" v-if="index == info.qualifiedRate.length - 1"
                >%</span
              >
            </div>
          </div>
        </div>
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">班次产能</div>
          </div>
          <div class="table-box">
            <div class="cTime2">{{ ctime }}</div>
            <el-table
              :data="tableListArr"
              stripe
              :header-cell-style="{
                fontFamily: 'OPPOSans',
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#FFFFFF',
                lineHeight: '28px',
                background: 'rgba(50, 147, 251, 0.15)',
              }"
              height="330px"
              :cell-style="{
                fontFamily: 'OPPOSans',
                fontWeight: 'bold',
                fontSize: '14px',
                color: '#79C2EC',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column
                prop="key"
                label="班组"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="value"
                label="产量"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.value }}千克
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img2" src="./sign.png" />
            <div class="box-info">生产完成率(挤压工序)</div>
          </div>
          <div class="time">{{ now }}</div>
          <div class="row model-pannel">
            <div class="model-title">总订单量</div>
            <div
              v-for="(subitem, index) in info.totalOrders"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
            <div class="unit">单</div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">已完成订单量</div>
            <div
              v-for="(subitem, index) in info.completedOrders"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
            <div class="unit">单</div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">未完成订单量</div>
            <div
              v-for="(subitem, index) in info.uncompletedOrders"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
            </div>
            <div class="unit">单</div>
          </div>
          <div class="row model-pannel">
            <div class="model-title">完成率</div>
            <div
              v-for="(subitem, index) in info.completionRate"
              class="row"
              :key="subitem.id"
            >
              <div class="model-number">{{ subitem }}</div>
              <span class="unit" v-if="index == info.completionRate.length - 1"
                >%</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-between box">
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">班次产能统计</div>
          </div>
          <div class="playBtn row">
            <div
              class="nowPlay"
              :class="{ cPlay: isPlay }"
              @click="getPlayInfo(true)"
            >
              继续轮播
            </div>
            <div
              class="nowPlay"
              :class="{ cPlay: !isPlay }"
              @click="getPlayInfo(false)"
            >
              停止轮播
            </div>
          </div>

          <div id="line" style="width: 100%; height: 350px"></div>
        </div>
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">总产能统计</div>
          </div>
          <div id="bar" style="width: 100%; height: 350px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productionDashboard } from "@/api/system/device";
import {} from "@/api/article";
import { getToken } from "@/utils/auth";
import moment from "moment";
import echarts from "echarts";
// import autofit from "autofit.js";
export default {
  components: {},
  filters: {},
  data() {
    return {
      chartLine: null,
      chartBar: null,
      now: moment().subtract(4, "days").format("MM月DD日"),
      info: {
        totalMoulds: "",
        qualifiedMoulds: "",
        unqualifiedMoulds: "",
        qualifiedRate: "",
        yesterdayTotalOutput: "",
        shiftOutput: [],
        totalOrders: "",
        completedOrders: "",
        uncompletedOrders: "",
        completionRate: "",
        shiftCapacityChart: [],
        totalCapacityChart: [],
      },
      tableList: [],
      nowDate: null,
      currentPage: 0,
      pageSize: 5,
      tableListArr: [],
      refreshInterval: null,
      ctime: null,
      isPlay: true,
      getPlayIntervel: null,
      number: null,
      subInterval: null,
    };
  },
  created() {},
  beforeDestroy() {
    // 组件卸载时清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
    if (this.getPlayIntervel) {
      clearInterval(this.getPlayIntervel);
    }
    if (this.subInterval) {
      clearInterval(this.subInterval);
    }
  },
  mounted() {
    this.getList();
    // 组件挂载时启动定时器
    this.refreshInterval = setInterval(() => {
      if (this.subInterval) {
        clearInterval(this.subInterval);
      }
      if (this.getPlayIntervel) {
        clearInterval(this.getPlayIntervel);
      }
      this.getList();
      this.now = moment().subtract(4, "days").format("MM月DD日");
    }, 300000);
    setInterval(() => {
      this.nowDate = moment().format("yyyy-MM-DD HH:mm:ss");
      // 计算ctime
      const now = moment();
      const hour = now.hour();
      this.ctime =
        hour < 8
          ? moment().subtract(2, "days").format("MM月DD日")
          : moment().subtract(1, "days").format("MM月DD日");
    }, 1000);
    document.addEventListener("fullscreenchange", this.checkFullscreen);
  },
  methods: {
    checkFullscreen() {
      this.isFullscreen = !!document.fullscreenElement;
      console.log("当前全屏状态:", this.isFullscreen);
    },
    fullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            this.isFullscreen = true;
            this.$store.commit("app/TOGGLE_FULLSCREEN", true);
          })
          .catch((err) => {
            console.error("全屏错误:", err);
          });
      } else {
        document.exitFullscreen().then(() => {
          this.isFullscreen = false;
          this.$store.commit("app/TOGGLE_FULLSCREEN", false);
        });
      }
    },
    drawBar() {
      this.chartBar = echarts.init(document.getElementById("bar"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "千克",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "10px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [],
          },
        ],
      };
      option.xAxis.data = this.info.totalCapacityChart.map((e) => e.date);
      option.series[0].data = this.info.totalCapacityChart.map((e) => e.value);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar.setOption(option);
    },
    getPlayInfo(bool) {
      this.isPlay = bool;
      if (!bool) {
        if (this.getPlayIntervel) {
          clearInterval(this.getPlayIntervel);
        }
      } else {
        this.getStart(this.info.shiftCapacityChart);
      }
    },
    drawLine(lineData, num) {
      this.chartLine = echarts.init(document.getElementById("line"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            console.log('params', params);
            // 添加自定义formatter
            let result = params[0].axisValue + "<br/>";
            params.forEach((item, i) => {
              if (num == 2 && i >= 4) {
                return
              }
              result +=
                item.marker +
                " " +
                item.seriesName +
                ": " +
                item.value +
                "<br/>";
            });
            return result;
          },
        },
        legend: {
          data: lineData.map((e) => e.name),
          top: 10,
          itemShape: "rect",
          itemWidth: 20,
          itemHeight: 10,
          lineStyle: {
            width: 0,
          },
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: false, // 隐藏 X 轴的分割线
          },
        },
        yAxis: {
          type: "value",
          name: "千克",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          splitLine: {
            show: false, // 隐藏 X 轴的分割线
          },
        },
        series: [],
      };
      option.xAxis.data = lineData[0].value.map((e) => e.time);
      lineData.forEach((e) => {
        option.series.push({
          name: e.name,
          type: "line",
          symbol: "circle",
          data: e.value.map((e) => e.value),
        });
      });
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },
    startPagination() {
      this.tableListArr = this.tableList.slice(
        this.currentPage * this.pageSize,
        (this.currentPage + 1) * this.pageSize
      );
      this.currentPage =
        (this.currentPage + 1) %
        Math.ceil(this.tableList.length / this.pageSize);
    },
    /** 查询用户列表 */
    getList() {
      let params = {
        startDate: moment().add(-30, "days").format("yyyy-MM-DD"),
        endDate: moment().format("yyyy-MM-DD"),
      };
      productionDashboard(params).then((res) => {
        this.info.totalMoulds = res.mouldStats.totalMoulds + "";
        this.info.qualifiedMoulds = res.mouldStats.qualifiedMoulds + "";
        this.info.unqualifiedMoulds = res.mouldStats.unqualifiedMoulds + "";
        this.info.qualifiedRate = res.mouldStats.qualifiedRate + "";
        console.log(
          "yesterdayTotalOutput",
          res.capacityStats.yesterdayTotalOutput
        );
        // this.tableList.push({
        //   key: "昨日生产总量",
        //   value: this.info.yesterdayTotalOutput,
        // });
        // this.info.yesterdayTotalOutput =
        //   res.capacityStats.yesterdayTotalOutput + "";
        let obj = res.capacityStats.shiftOutput;
        this.info.shiftOutput = Object.keys(obj).map((key) => ({
          key,
          value: obj[key],
        }));
        // 合并数组
        this.tableList = this.tableList.concat(this.info.shiftOutput);
        this.startPagination();
        this.subInterval = setInterval(() => {
          this.startPagination();
        }, 5000);
        this.info.totalOrders = res.orderStats.totalOrders + "";
        this.info.completedOrders = res.orderStats.completedOrders + "";
        this.info.uncompletedOrders = res.orderStats.uncompletedOrders + "";
        this.info.completionRate = res.orderStats.completionRate + "";
        this.info.shiftCapacityChart = res.shiftCapacityChart;
        this.info.totalCapacityChart = res.totalCapacityChart;
        this.getStart(this.info.shiftCapacityChart);

        this.drawBar();
      });
    },
    getStart(data) {
      let lineData = data.filter((e, i) => i <= 5);
      this.drawLine(lineData, 1);
      this.getPlayIntervel = setInterval(() => {
        if (this.number == 0) {
          this.number = 1;
          lineData = data.filter((e, i) => i > 5);
          this.drawLine(lineData, 2);
        } else {
          this.number = 0;
          lineData = data.filter((e, i) => i <= 5);
          this.drawLine(lineData, 1);
        }
      }, 10000);
    },
  },
};
</script>
<style scoped  lang='scss'>
#homepage {
  background: rgb(0, 17, 32);
  // height: calc(100vh - 50px);
  height: 100%;
}
.header {
  position: absolute;
}
.title {
  width: 100%;
  height: 100%;
}
.label {
  width: 100%;
  position: absolute;
}
.box-info {
  position: absolute;
  top: 0;
  z-index: 9;
  color: #fff;
  margin-left: 20px;
  line-height: 36px;
}
.box-img {
  height: 32px !important;
  width: 200px !important;
}
.box-img2 {
  height: 32px !important;
  width: 260px !important;
}
.pannel {
  width: 33%;
  height: 380px;
  position: relative;
}
.pannel img {
  height: 380px;
}
.pannel2 {
  margin-top: 6px;
  width: 49.8%;
  position: relative;
}
.pannel2 img {
  height: 390px;
}
.box {
  margin: 0 10px;
}
.row {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
.container {
  position: relative;
  top: 90px;
}
.model-title {
  width: 220px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.model-pannel {
  height: 50px;
  line-height: 50px;
  color: #fff;
  width: 100%;
  margin-bottom: 12px;
}
.flex-wrap {
  flex-wrap: wrap;
}
.model-number {
  background: rgb(45, 56, 86);
  color: #71cef8;
  width: 30px;
  font-weight: bold;
  border-bottom: 2px solid #71cef8;
  text-align: center;
  margin-bottom: 6px;
  margin-right: 10px;
}
.model-sign {
  margin-right: 6px;
  font-weight: bold;
}
.model-box {
  width: 300px;
}
::v-deep.el-table {
  background-color: transparent;
  thead {
    tr {
      background-color: transparent !important;
    }
    th {
      background: rgba(50, 147, 251, 0.15) !important;
    }
  }
  tbody {
    tr {
      td {
        border-bottom: 2px solid #063b64 !important;
      }
      td:first-child {
        border-left: 2px solid #063b64;
      }
      td:last-child {
        border-right: 2px solid #063b64;
      }
      margin-bottom: 3px;
    }
    tr:first-child {
      td {
        border-top: 2px solid #063b64;
      }
    }
  }
  .el-table__header {
    background-color: #052c55;
  }
  .el-table__expand-icon--expanded {
    transform: rotate(180deg);
  }
  .el-table__expanded-cell {
    background-color: transparent;

    > div {
      margin-top: 0;
      background-color: transparent;
      padding: 0 10px;
      thead {
        background: rgba(27, 130, 183, 0.4);
        tr {
          background-color: transparent !important;
        }
        th {
          background: transparent !important;
          color: #ffffff;
          font-size: 14px;
        }
      }
      tbody {
        td {
          color: #79c2ec;
          font-size: 14px;
          padding: 0;
        }
      }
      tr {
        background: #09385d;
        &.el-table__row--striped td.el-table__cell {
          background: #0d4a72;
        }
      }
    }
  }
  /* 自定义整个滚动条 */
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important; /* 滚动条宽度 */
    border-radius: 16px !important;
  }

  /* 自定义滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #016f8e00 !important; /* 轨道颜色 */
  }

  /* 自定义滚动条的滑块（thumb） */
  ::-webkit-scrollbar-thumb {
    background: #0081ff !important; /* 滑块颜色 */
    // border-radius: 16px !important;
  }
  .el-table__body {
    tr:hover > td.el-table__cell {
      // background-color: transparent !important;
    }
    tr:hover {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
    .current-row {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
  }
  margin-top: 10px;
  &::before {
    display: none;
  }

  th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  tr {
    background: #07315a;
    &.el-table__row--striped td.el-table__cell {
      background: #052950;
    }
    &:hover > td.el-table__cell {
      background: #052950;
    }
  }

  td.el-table__cell {
    border-bottom: none;
    height: 35px;
  }
  th.el-table__cell > .cell {
    padding: 0;
  }
  .cell {
    padding: 0;
  }
  .el-table__empty-block {
    background-color: #07315a;
  }

  .el-table__body tr.hover-row > td.el-table__cell {
    background-color: #063b64;
  }
}
.table-box {
  margin: 0 16px;
  padding-top: 10px;
}
.now {
  color: #fff;
  position: absolute;
  right: 26px;
  bottom: 65%;
  z-index: 99;
}

.title-font {
  font-size: 36px;
  color: #ffffff;
  font-weight: bold;
  font-family: YouSheBiaoTiHei;
  line-height: 50px;
  letter-spacing: 6px;
  text-shadow: 0px 0px 10px #89b7fe;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.time {
  color: #fff;
  font-size: 18px;
  line-height: 50px;
  width: 220px;
  text-align: center;
  margin: 10px 0;
}
.unit {
  font-size: 18px;
  line-height: 50px;
  width: 60px;
  text-align: center;
}
.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  color: yellow;
}
.cTime {
  color: #fff;
  position: absolute;
  left: 46px;
  top: 40px;
}
.cTime2 {
  color: #fff;
  position: absolute;
  right: 20px;
  top: 10px;
}
.playBtn {
  position: absolute;
  right: 26px;
  top: 10px;
}
.nowPlay {
  background: transparent;
  color: #2e82ff;
  border: 1px solid #2e82ff;
  padding: 3px 10px;
  cursor: pointer;
}
.cPlay {
  background: #2e82ff;
  color: #fff;
  padding: 3px 10px;
  cursor: pointer;
}
</style>
